/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import React, {Component} from 'react';
import {View} from 'react-native';
import { Icon,  List, Button, Toast, InputItem } from 'antd-mobile-rn';

// project
import {
    Page, Content, Header, Between, Text
} from '../../library';

/******************************************************************************************
 * Export Class
 ******************************************************************************************/

export default class RetrievePassword extends Component {

    /*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
    constructor (props) {
        super(props);

        /**
         * state
         */
        this.state = {
            duration:120,
            durationBool:false,
            nextBool:true,
            input1: '',
            input2: '',
            input3: '',
            input4: ''
        };
    }

    /*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
    render(){
        return(
            <Page>
				
                <Content bg='#efeff4' mt='48'>

                    {
                        this.state.nextBool ? (
						// if
						
                        <View style={{marginTop:18}}>
                            {/* 发送验证码 star */}
                            <List>
                                <InputItem
                                    onChange={(val)=> {
                                        this.setState({
                                            input1: val
                                        })
                                    }}
                                    value={this.state.input1}
									type='phone'
									placeholder="
									请输入手机号码"
									clear
									name='text1'
									maxLength={11}
									moneyKeyboardAlign="left"
                                    style={{borderBottomColor:'#eaeaea',borderBottomWidth:1}}
                                    placeholderTextColor="#c9c9c9"
                                    ></InputItem>
                                <InputItem
                                    placeholderTextColor="#c9c9c9"
                                    onChange={(val)=> {
                                        this.setState({
                                            input2: val
                                        })
                                    }}
                                    value={this.state.input2}
									type='phone'
									placeholder="
									请输入验证码"
									clear
									name='text2'
									extra={
										// 右方嵌入获取验证码按钮
										<Button 
											style={{
												borderWidth:1,
												borderColor:'#0c6',
												height:26,
												paddingLeft:6,
												paddingRight:6,
												borderRadius:5
											}}
											// disabled={this.state.durationBool}
											onPressIn={()=>{
												Toast.info('验证码已发送到您的手机上',3,null,true);
												if(!this.state.durationBool){
													this.setState({
														durationBool: true,
													});
													var timer = setInterval(()=>{
														if(this.state.duration!=0){
															this.setState({
																duration : this.state.duration-1
															});
														}else{
															clearInterval(timer)
															this.setState({
																durationBool: false,
																duration:120
															});
														}
														console.log(this.state.duration)
													},1000)
												}
											}}
										>
										
											<Text color='#0c6' size='12'>{this.state.durationBool ?this.state.duration+'秒后重发': '获取验证码'}</Text>
										</Button>
									}
									moneyKeyboardAlign="left"
									style={{borderBottomColor:'#eaeaea',borderBottomWidth:1}}
								></InputItem>
                            </List>
							{/* 发送验证码 end */}
							
                            {/* 下一步按钮 star */}
                            <View>
                                <Button style={{backgroundColor:'#02b349',marginLeft:10,marginRight:10,height:50,marginTop:30}} onPressIn={()=>{
                                    this.setState({
                                        nextBool:false
                                    })
                                }}>
									<Text color='#fff' size='18'>下一步</Text>
								</Button>
                            </View>
							{/* 下一步按钮 star */}
							
                        </View>

                        // if end
                        ):(
                        // else

                        <View style={{marginTop:18}}>
                            {/* 修改密码 star */}
                            <List>
                                <InputItem
                                    placeholderTextColor="#c9c9c9"
                                    onChange={(val)=> {
                                        this.setState({
                                            input3: val
                                        })
                                    }}
                                    value={this.state.input3}
									type='password'
									placeholder="
									请输入6-12位的新密码"
									clear
									name='password1'
									style={{borderBottomColor:'#eaeaea',borderBottomWidth:1}}
								></InputItem>
                                <InputItem
                                    placeholderTextColor="#c9c9c9"
                                    onChange={(val)=> {
                                        this.setState({
                                            input4: val
                                        })
                                    }}
                                    value={this.state.input4}
									type='password'
									placeholder="
									请再次输入新密码"
									clear
									name='password2'
									style={{borderBottomColor:'#eaeaea',borderBottomWidth:1}}
								></InputItem>

                            </List>
                            {/* 修改密码 end */}

                            {/* 提交按钮 star */}
                            <View>
                                <Button style={{backgroundColor:'#02b349',marginLeft:10,marginRight:10,height:50,marginTop:30}} onPressIn={()=>{
                                    // 写提交表单时间事件，提交成功后跳只登陆页面，弹出修改成功提示，具体看图
                                }}>
									<Text color='#fff' size='18' >提交</Text>
								</Button>
                            </View>
                            {/* 提交按钮 star */}
                            
                        </View>

                        // else end
                        )
                    }                    

                </Content>

                {/* 顶部 star */}
                <Header h='48' y='center' bg='#fff'>
                    <Between px='10'>
                        <Icon type='left' size='md' color='#00CC66' />
                        <Text size='17'>找回密码</Text>
                        <Text></Text>
                    </Between>
                </Header>
                {/* 顶部 star */}

            </Page>
        )
    }
}

